<template>
  <div class="strut-div">
    <div class="mt-card">
      <div class="mt-card-top clear-float">
        <div class="ct-item" v-for="(data, index) in topTotalData" :key="index">
          <p class="c-title">{{data.name}}</p>
          <div class="c-num lcd-font"> <count-to :end="Math.round(data.value)"></count-to></div>
        </div>
      </div>
      <div class="mt-card-middle">
        <div class="mt-card-container">
          <tourist-map></tourist-map>
        </div>
      </div>
     <!-- <div class="mt-card-bottom clear-float">
        <div class="ct-item" v-for="(data, index) in topTotalData" :key="index">
          <p class="c-title">{{data.name}}</p>
          <div class="c-num lcd-font"> <count-to :end="Math.round(data.value)"></count-to></div>
        </div>
      </div> -->
      <div class="prod-list clear-float">
        <div class="prd-item prd-item-1">
          <img src="@/assets/imgs/tg/cyclic-1.png">
          <p>有机产品<span>【130】</span></p>
        </div>
        <div class="prd-item prd-item-2">
          <img src="@/assets/imgs/tg/cyclic-2.png">
          <p>绿色产品<span>【342】</span></p>
        </div>
        <div class="prd-item prd-item-3">
          <img src="@/assets/imgs/tg/cyclic-3.png">
          <p>无公害品<span>【785】</span></p>
        </div>
        <div class="prd-item prd-item-4">
          <img src="@/assets/imgs/tg/cyclic-4.png">
          <p>地理标志<span>【143】</span></p>
        </div>
      </div>
    </div>


    <div class="mb-card">

      <div class="card-item" style="height:336px;margin-top:20px; width: 428px; margin-right: 20px;">
        <p class="card-title">地理标志认证农产品历年认证统计</p>
        <div class="card-div">
          <div class="strut-div">
            <common-bar-chart ref="geoMarkBar" :config="geoMarkBarConfig"></common-bar-chart>
          </div>
        </div>
      </div>

      <div class="card-item" style="width:803px;height:336px;margin-top:20px;">
        <p class="card-title table-title-box">
          <span>认证企业</span>
          <el-select size='mini' v-model="selectValue" placeholder="请选择" @change="handleSelectChange">
            <el-option v-for="item in tableOption" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </p>
        <div class="card-div">
          <common-table ref="companyTableDetail" :config="companyTableConfig"></common-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import CommonTable from "@/components/common/common-table.vue";
  import CommonBarChart from '@/components/common/common-bar-chart.vue';
  import TouristMap from '@/views/humanistic-tourism/tourist-map/tourist-map.vue';
  import CountTo from '@/components/count-to';
  export default {
    name: 'sxFamousMiddle',
    components: {
      CommonTable,
      CommonBarChart,
      TouristMap,
      CountTo
    },
    data() {
      return {
        geoMarkBarConfig: {
          option: {
            id: 'geoMarkBarBar',
            xAxis: [],
            y: [{
              axis: {
                min: null,
                max: null,
                fontSize: 14
              },
              title: '',
              data: [],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#6E53F7' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#B6A3FF' // 100% 处的颜色
                }],
              },
              stack: '1'
            }]
          }
        },
        topTotalData: [],
        selectValue: 'taiyuan',

        tableOption: [{
          value: 'taiyuan',
          label: '太原'
        }, {
          value: 'changzhi',
          label: '长治'
        }, {
          value: 'jincheng',
          label: '晋城'
        }, {
          value: 'jinzhong',
          label: '晋中'
        }, {
          value: 'linfen',
          label: '临汾'
        }, {
          value: 'lvliang',
          label: '吕梁'
        }, {
          value: 'shuozhou',
          label: '朔州'
        }, {
          value: 'xinzhou',
          label: '忻州'
        }, {
          value: 'yangquan',
          label: '阳泉'
        }, {
          value: 'datong',
          label: '大同'
        }],
        companyTableConfig: {
          request: {
            url: "url",
            params: {}
          },
          option: {
            id: 'govIncomeDetail',
            height: 266,
            tableColor: '#6BEEFF',
            tableHeader: [{
              prop: "cityName",
              title: "城市",
              width:65
            }, {
              prop: "name",
              title: "类别",
              width:110
            }, {
              prop: "certificateNumber",
              title: "编码",
              width:150
            }, {
              prop: "regionName",
              title: "区县",
              width:65
            }, {
              prop: "updateTime",
              title: "时间",
              width:160
            }, {
              prop: "companyName",
              title: "公司名称",
            }],
            tableData: []
          }
        }
      }
    },
    mounted() {
      this.getTopTotalData();
      this.initgeoMarkData();
      this.getTableData('taiyuan');
    },
    methods: {
      initgeoMarkData() {
        this.$axios.get('../../../../static/geoAndCompanyData.json').then(res => {
          let data = res.data.geoIndicationSatistical['山西省'];

          this.geoMarkBarConfig.option.xAxis = data.map(item => item.yearStr)
          this.geoMarkBarConfig.option.y[0].data = data.map(item => item.count)

          this.$refs.geoMarkBar.initChart();
        })
      },
      getTopTotalData() {
        this.$axios.get('../../../../static/geoAndCompanyData.json').then(res => {
          let data = res.data.everyYearSatistical['山西省'].filter(item => item.yearStr == 2018);
          let _count = data[0].count;
          let _incremental = data[0].incremental;

          this.topTotalData = [{
            name: '认证企业累计总数',
            value: _count
          }, {
            name: '新增认证企业',
            value: _incremental
          }, {
            name: '累计销售额（亿元）',
            value: 54.38
          }, {
            name: '累计订单量（万单）',
            value: 16564.58
          }]
        })
      },
      handleSelectChange(val) {
        this.getTableData(val);
      },
      getTableData(name) {
        this.$axios.get(`../../../../static/famousTableJson/${name}.json`).then(res => {
          let data = res.data.products;
          this.companyTableConfig.option.tableData = data;
          this.$refs.companyTableDetail.initTable();
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mt-card {
    width: 100%;
    height: 635px;
    position: relative;
    // background: url(../../../assets/imgs/tg/middle-card.png) no-repeat;

    .mt-card-top {
      padding: 0px 270px 0 270px;
      height: 110px;

      >.ct-item {
        width: 145px;
        height: 90px;
        margin: 10px 16px;
        float: left;

        >.c-title {
          height: 43px;
          line-height: 43px;
          font-size: 16px;
        }

        >.c-num {
          width: 145px;
          height: 47px;
          text-align: center;
          line-height: 55px;
          color: #ffcb03;
          font-size: 36px;
          background: url(../../../assets/imgs/tg/number-bg.png);
        }
      }
    }

    .mt-card-bottom {
      padding: 0 46px;
      height: 110px;
      .ct-item {
        width: 145px;
        height: 90px;
        margin: 10px 16px;
        float: left;

        >.c-title {
          height: 43px;
          line-height: 43px;
          font-size: 16px;
        }

        >.c-num {
          width: 145px;
          height: 47px;
          text-align: center;
          line-height: 55px;
          color: #ffcb03;
          font-size: 36px;
          background: url(../../../assets/imgs/tg/number-bg.png);
        }
      }


    }

    .prod-list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-left: 20px;
      margin-top:-70px;
      .prd-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 153px;
        height: 70px;
        line-height: 70px;
        float: left;
        font-size: 14px;
        margin: 20px auto;

        >img {
          vertical-align: middle;
          margin-left: -36px;
          // float: left;
        }

        >p {
          display: flex;
          flex: auto;
          height: 100%;
        }
      }

      .prd-item-1 {
        color: #34d4f3;
        background: url('../../../assets/imgs/tg/number_bg_1.png') no-repeat center right;
      }

      .prd-item-2 {
        color: #2cf6a7;
        background: url('../../../assets/imgs/tg/number_bg_2.png') no-repeat center right;
      }

      .prd-item-3 {
        color: #0e65f4;
        background: url('../../../assets/imgs/tg/number_bg_3.png') no-repeat center right;
      }

      .prd-item-4 {
        color: #fdd942;
        background: url('../../../assets/imgs/tg/number_bg_4.png') no-repeat center right;
      }
    }

    .mt-card-container {
      width: 800px;
      height: 512px;
      margin: 0 auto;
      // background: rebeccapurple
    }


  }

  .mb-card {
    .table-title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 20px;
    }
  }





</style>
